<template>
  <div>
    <div class="mb-6">
      <div class="flex justify-between items-start mb-4">
        <div>
          <h2 class="text-2xl font-medium mb-2">{{ job.title }}</h2>
          <div class="text-blue-600 text-xl font-medium">{{ job.salary }}</div>
        </div>
      </div>
      
      <div class="flex items-center space-x-6 mb-6 text-sm text-gray-600">
        <div class="flex items-center">
          <i class="ri-map-pin-line mr-1"></i>
          <span>{{ job.location }}</span>
        </div>
        <div class="flex items-center">
          <i class="ri-time-line mr-1"></i>
          <span>{{ job.experience }}</span>
        </div>
        <div class="flex items-center">
          <i class="ri-book-open-line mr-1"></i>
          <span>{{ job.education }}</span>
        </div>
      </div>
      
      <div class="flex items-center space-x-4 mb-6">
        <button 
          @click="toggleFavorite"
          :class="[
            'flex items-center justify-center px-5 py-2 border rounded-lg transition-colors',
            isFavorited ? 'border-yellow-400 text-yellow-600 bg-yellow-50' : 'border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white'
          ]"
        >
          <i :class="isFavorited ? 'ri-star-fill' : 'ri-star-line'" class="mr-1"></i>
          <span>{{ isFavorited ? '已收藏' : '收藏' }}</span>
        </button>
        
        <button class="flex items-center justify-center px-5 py-2 border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white transition-colors rounded-lg">
          <i class="ri-send-plane-line mr-1"></i>
          <span>投递简历</span>
        </button>
        
        <button 
          @click="startCommunication"
          class="flex items-center justify-center px-5 py-2 bg-blue-600 text-white hover:bg-blue-700 transition-colors rounded-lg"
        >
          <i class="ri-message-3-line mr-1"></i>
          <span>立即沟通</span>
        </button>
      </div>
      
      <div class="flex items-center space-x-6 text-sm text-gray-500">
        <div class="flex items-center cursor-pointer hover:text-gray-700">
          <i class="ri-close-circle-line mr-1"></i>
          <span>不合适</span>
        </div>
        <div class="flex items-center cursor-pointer hover:text-gray-700">
          <i class="ri-wechat-line mr-1"></i>
          <span>微信已沟通分享</span>
        </div>
        <div class="flex items-center cursor-pointer hover:text-gray-700">
          <i class="ri-flag-line mr-1"></i>
          <span>举报</span>
        </div>
      </div>
    </div>
    
    <div class="border-t pt-6">
      <div class="mb-6">
        <h3 class="text-lg font-medium mb-3">职位描述</h3>
        <div class="text-gray-600 leading-relaxed" v-html="job.description"></div>
      </div>
      
      <div>
        <h3 class="text-lg font-medium mb-3">任职要求</h3>
        <div class="text-gray-600 leading-relaxed" v-html="job.requirements"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import type { Job } from '../types'

interface Props {
  job: Job
}

const props = defineProps<Props>()

const router = useRouter()
const isFavorited = ref(false)

const toggleFavorite = () => {
  isFavorited.value = !isFavorited.value
}

const startCommunication = () => {
  router.push('/job-communication')
}
</script>
